<template>
  <div class="flex_box">
    <div style="width:50%">
      <el-scrollbar height="600px">
        <el-checkbox-group v-model="surveyFilter" @change="surveyExtentChange">
          <el-checkbox label="我发布的问卷" />
          <el-checkbox label="我参与的问卷" />
        </el-checkbox-group>
        <div v-loading="surveyList == null" class="own_survey_list" style="min-height:80px;width:100%">
          <div class="own_survey_item" v-for="survey in surveyList" :key="survey.surveyId">
            <survey-item-component :surveyItem="survey" />
            <el-dropdown style="float:right;margin: 0px auto 0px;color: var(--el-color-primary);"
              v-if="survey.surveyUserId == $store.state.user.userId">
              <span class="el-dropdown-link">
                更多
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="alterSurvey(survey)">修改</el-dropdown-item>
                  <el-dropdown-item @click="editSurvey(survey.surveyId)">编辑</el-dropdown-item>
                  <el-dropdown-item @click="viewAnswer(survey.surveyId)">数据</el-dropdown-item>
                  <!-- <el-dropdown-item>封禁</el-dropdown-item> -->
                  <el-dropdown-item>删除</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown><el-divider style="float:right;margin: 5px 0;" border-style="dotted" />
          </div>
        </div>
      </el-scrollbar>
    </div>
    <div style="width:50%;border-left: 1px solid #D4D7DE;">
      <h2 style="text-align:center">{{ editing ? '当前正在编辑问卷' : '创建问卷' }}</h2>
      <br>
      <el-form label-width="120px" v-model="survey_form">
        <el-form-item label="问卷标题">
          <el-input v-model="survey_form.surveyTitle" />
        </el-form-item>
        <el-form-item label="问卷描述">
          <el-input v-model="survey_form.surveyDesc" type="textarea" />
        </el-form-item>
        <!-- <el-form-item label="问卷要求">
          <el-input v-model="survey_form.surveyRequirement" type="textarea" />
        </el-form-item> -->
        <el-form-item label="问卷填写时间">
          <el-date-picker v-model="editingDate" type="datetimerange" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" />
        </el-form-item>
        <el-form-item label="参与范围" v-show="!survey_form.surveyAnon">
          <el-radio-group v-model="surveyExtent">
            <el-radio label="全国" />
            <el-radio v-if="$store.state.user.collegeId > 0" label="本校" />
            <el-radio v-if="$store.state.user.groupId > 0" label="班级" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="问卷状态">
          <el-radio-group v-model="survey_form.surveyStatus">
            <el-radio :label="true">正常</el-radio>
            <el-radio :label="false">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="其他配置">
          <el-checkbox v-model="survey_form.surveyAnon" :checked="survey_form.surveyAnon" label="允许未登录用户填写" />
        </el-form-item>
        <el-form-item>
          <el-button type="success" :loading="isPosting" v-if="editing" @click="postUpdate">提交更改</el-button>
          <el-button type="primary" :loading="isPosting" v-if="!editing" @click="postSurvey">发布问卷</el-button>
          <el-button type="info" @click="reform">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import SurveyItemComponent from '../SurveyItemComponent.vue'

export default {
  components: { SurveyItemComponent },
  data() {
    return {
      surveyFilter: [],
      survey_form: { surveyStatus: true, surveyStart: undefined },
      editingDate: null,
      editing: false,
      isPosting: false,
      surveyExtent: '全国',
      surveyList: undefined,
      surveyOfMine: undefined,
      surveyOfOther: undefined
    }
  },
  created() {
    this.getList()
  },
  methods: {
    editSurvey(surveyId) {
      if (surveyId == null)
        window.open(document.location.origin + '/edit/survey_edit.html')
      else window.open(document.location.origin + '/edit/survey_edit.html?survey_id=' + surveyId)
    },
    getList() {
      this.$store.state.ajaxQueue.length++
      this.$request.get('/survey/list').then(resp => {
        this.$store.state.ajaxQueue.finished++
        if (resp.success) this.surveyOfMine = resp.data
        this.$store.state.ajaxQueue.length++
        this.$request.get('/survey/list-other').then(resp2 => {
          this.$store.state.ajaxQueue.finished++
          if (resp2.success) this.surveyOfOther = resp2.data
          this.surveyFilter = ['我发布的问卷', '我参与的问卷']
        })
      })
    },
    alterSurvey(survey) {
      this.survey_form = survey
      this.editing = true
      this.editingDate = []
      this.editingDate[0] = new Date(survey.surveyStart)
      this.editingDate[1] = new Date(survey.surveyEnd)
      if (survey.surveyCollegeId > 0) this.surveyExtent = '本校'
      else if (survey.surveyGroupId > 0) this.surveyExtent = '班级'
      else this.surveyExtent = '全国'
    },
    postSurvey() {
      this.isPosting = true
      this.survey_form.surveyStart = this.editingDate[0].getTime()
      this.survey_form.surveyEnd = this.editingDate[1].getTime()
      if (this.surveyExtent == '本校') this.survey_form.surveyCollegeId = this.$store.state.user.collegeId
      else if (this.surveyExtent == '班级') this.survey_form.surveyCollegeId = this.$store.state.user.groupId
      else this.survey_form.surveyCollegeId = 0
      this.$store.state.ajaxQueue.length++
      this.$request.post('/survey/add', this.survey_form).then(resp => {
        this.$store.state.ajaxQueue.finished++
        this.$ElMessage({
          message: resp.msg,
          type: resp.success ? 'success' : 'error',
        })
        if (resp.success) {
          this.reform()
          this.getList()
        }
      }).finally(() => this.isPosting = false)
    },
    postUpdate() {
      this.isPosting = true
      this.survey_form.surveyStart = this.editingDate[0].getTime()
      this.survey_form.surveyEnd = this.editingDate[1].getTime()
      if (this.surveyExtent == '本校') this.survey_form.surveyCollegeId = this.$store.state.user.collegeId
      else if (this.surveyExtent == '班级') this.survey_form.surveyCollegeId = this.$store.state.user.groupId
      else this.survey_form.surveyCollegeId = 0
      this.$store.state.ajaxQueue.length++
      this.$request.post('/survey/update', this.survey_form).then(resp => {
        this.$store.state.ajaxQueue.finished++
        this.$ElMessage({
          message: resp.msg,
          type: resp.success ? 'success' : 'error',
        })
        if (resp.success) {
          this.reform()
          this.getList()
        }
      }).finally(() => this.isPosting = false)
    },
    viewAnswer(surveyId) {
      if (surveyId != null)
        window.open(document.location.origin + '/answer.html?surveyId=' + surveyId)
    },
    reform() {
      this.survey_form = { surveyStatus: true }
      this.surveyExtent = '全国'
      this.editingDate = null
      this.editing = false

    },
    surveyExtentChange() { }
  },
  watch: {
    surveyFilter() {
      if (this.surveyFilter.indexOf('我发布的问卷') != -1 && this.surveyFilter.indexOf('我参与的问卷') != -1) {
        this.surveyList = this.surveyOfMine
        this.surveyList = this.surveyList.concat(this.surveyOfOther)
      }
      if (this.surveyFilter.indexOf('我发布的问卷') == -1) {
        this.surveyList = this.surveyOfOther
      }
      if (this.surveyFilter.indexOf('我参与的问卷') == -1) {
        this.surveyList = this.surveyOfMine
      }
    }
  }
}
</script>

<style scoped>
.flex_box {
  display: flex;
}

.own_survey_list {
  display: flex;
  flex-wrap: wrap;
}

.own_survey_item {
  padding: 10px;
  width: 100%;
}

main {
  max-width: 1240px;
  margin: auto;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  overflow-x: hidden;
}

main>h1 {
  margin: 20px;
}

.survey img {
  max-width: 100%;
}

.survey_bottom {
  height: fit-content;
  position: fixed;
  padding: 20px;
  bottom: 0px;
  z-index: 5;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  background-color: white;
  border-top: 1px solid #cdd0d6;
}
</style>